<template>
    <div id="privilegeItem">
        <div id="initiation">
                <van-icon name="gem-o" size="30" id="initiationIcon"/>
        </div>
        <div>
            <p id="initiationGift">入会有礼</p>
        </div>
        <div class="privilegeItem">

            <p>20元代金券</p>
            <p>服务券</p>
            <p>50积分</p>
        </div>
    </div>
</template>

<script>
    import {Icon} from "vant"
    export default {
        name: "PrivilegeItem",
        components:{
            "van-icon":Icon
        }
    }
</script>

<style scoped>
    #privilegeItem{
        border:1px solid #FFF5E1;
        width: 105px;
        border-radius: 10px;
        background-color: #FFF5E1;
    }
    #initiation{
        width: 35px;
        height: 35px;
        border: 1px solid black;
        border-radius: 50%;
        position: relative;
        margin: 10px auto;

    }
    #initiationIcon{
        position: absolute;
        top: 50%;
        transform: translate(-50%,-50%);
        padding: 0px;
    }

    #initiationGift{
        font-size: 0.9em;
    }
    .privilegeItem p{
        font-size: 0.2em;
        margin: 5px;
    }
</style>